<template>
	<view class="content">
		<view class="banner-container">
			
		</view>
		<!-- 话费充值图片 -->
		<view class="logo-container">
			<view class="logo-item pos">
				<view class="vip-logo flex-center">
					VIP
				</view>
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					话费充值
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					爱奇艺
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-28 text-center">
					腾讯视频
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					优酷视频
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					芒果TV
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					QQ音乐
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					百度网盘
				</view>
			</view>
			<view class="logo-item pos">
				<image src="@/static/images/logo1.jpg" class="logo-img" mode=""></image>
				<view class="mt-10 fs-26 text-center">
					网易云音乐
				</view>
			</view>
		</view>
		<!-- 商品图片展示 -->
		<view class="goods-container" v-if="false">
			<view class="goods-title">
				<scroll-view class="flex">
					<view class="goods-title-box flex"  style="padding-bottom:20rpx;">
						<view class="category-item" v-for="(item, index) in cateList" :key="index" 
							:class="{active:cateIndex===index}" @click="categoryBtn(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="goods-box">
				<view class="goods-item" v-for="i in 6" :key="i">
					<image src="@/static/images/logo1.jpg" class="goods-img" mode=""></image>
					<view class="goods-info mt-10 fs-26">
						西柚抽卫生纸巾整箱批发实用西柚抽卫生纸巾整箱批发实用
					</view>
					<view class="goods-price mt-10">
						<text class="origin-price">￥ 10.90</text>
						<text class="market-price">￥ 5.90</text>
					</view>
				</view>
			</view>
		</view>
		<!-- end of 商品图片展示 -->
		<categotyList />
	
	</view>
</template>

<script>
	import categotyList from './components/categoryList.vue'
	export default {
		components:{
			categotyList,
		},
		data() {
			return {
				title: 'Hello',
				cateList:[{name:'精选商品'},{name:'综合'},{name:'女装'},{name:'男装'},{name:'家装'}],
				cateIndex:0,
			}
		},
		onLoad() {

		},
		methods: {
			categoryBtn(index){
				this.cateIndex = index;
			}
		}
	}
</script>

<style lang="scss">
.banner-container{
	background: linear-gradient(135deg, #1ec0ff,#199bff);
	height:350rpx; 
}
.logo-container{
	display: flex;
	flex-wrap: wrap;
	
	.logo-item{
		border:1rpx solid #EFEFEF;
		border-radius: 12rpx;
		width:160rpx;
		margin:10rpx 12rpx;
		padding:12rpx;
		box-sizing: border-box;
		
		.vip-logo{
			position: absolute;
			z-index: 2;
			top:0;
			right:0;
			background-color:#EF0000;
			color: #FFFFFF;
			font-size: 24rpx;
			width:60rpx;
			height: 40rpx;
			border-radius: 12rpx;
		}
		
		.logo-img{
			width:100rpx;
			height:100rpx;
			margin:0 auto;
			display: block;
			color:#333333;
		}
	}
}
.goods-title{
	margin:24rpx 12rpx 0;
}
.goods-title-box{
	.category-item{
		margin:0 12rpx;
		&.active{
			color:#ef0000;
			position: relative;
			&::after{
				content: "";
				display: block;
				position: absolute;
				width:50rpx;
				height: 4rpx;
				bottom: -4rpx;
				left:50%;
				transform: translateX(-50%);
				background-color: #ef0000;
			}
		}
	}
}
.goods-box{
	padding:20rpx 24rpx;
	display: flex;
	flex-wrap: wrap;
	
	.goods-item{
		margin-bottom:30rpx;
		border:1rpx solid #efefef;
		padding-bottom:20rpx;
		border-radius: 10rpx;
		
		&:nth-child(2n){
			margin-left:30rpx;
		}
		
		.goods-img{
			width:325rpx;
			height:325rpx;
			border-radius: 4rpx;
		}
		.goods-info{
			display: -webkit-box;
			text-overflow: ellipsis;
			overflow: hidden;
			width:330rpx;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			padding:0 12rpx;
			box-sizing: border-box;
		}
		
		.goods-price{
			font-size: 26rpx;
			padding:0 12rpx;
			
			.origin-price{
				text-decoration: line-through;
				color:#999999;
			}
			.market-price{
				color:#EF0000;
			}
		}
	}
}




</style>
